<template>
<div class="col-md-12">
  <super-hd-screen-detail></super-hd-screen-detail>
  <my-navbar>
    <template slot="right"> 
      <button class="btn btn-default" @click.prevent="onAdd">
        <span class="glyphicon glyphicon-plus"></span> {{$t('common.add')}}
      </button>
      <button class="btn btn-default" @click.prevent="onRefresh">
        <span class="glyphicon glyphicon-refresh"></span> {{$t('common.refresh')}}
      </button>   
    </template>
  </my-navbar>
  <div class="col-md-12">
    <my-table :cfg="cfg" :list="superhdscreen.list" :loading="superhdscreen.loading"></my-table>
  </div>
</div>
</template>

<script>
import _ from 'lodash'
import ebus from 'libs/ebus.js'
import toast from 'libs/toast.js'
import msgbox from 'libs/msgbox.js'
import {printObj} from 'libs/utils.js'
import locales from '../locales/srcSuperHdScreen.js'
import SuperHdScreenDetail from './SuperHdScreenDetail.vue'
import {List} from '../configs/srcSuperHdScreen.js'
import {streamSrcApi} from 'share/server/api.js'
import * as actions from 'share/server/vuex/actions/streamsrc.js'

export default {
  locales,
  components: {
    'super-hd-screen-detail': SuperHdScreenDetail,
  },
  vuex: {
    getters: {
      superhdscreen: (state) => state.superhdscreen
    },
    actions
  },
  data () {
    return {
      cfg: {
        checkable: false,
        showHead: true,
        columns: new List(this),
        operation: {
          name: this.$t("common.operation"),
          width: 'auto',
          actions: [{
            icon: 'glyphicon glyphicon-trash',
            doClick: this.onDel
          }, {
            icon: 'glyphicon glyphicon-edit',
            doClick: this.onShowDetail
          }]
        }        
      }
    }
  },
  methods: {
    onAdd () {
      this.onShowDetail({
        _id: -1,
        port: 554,
        ipaddr: '192.168.1.100',
        name: 'example',
        tag: '',
        mainUrl: '',
        previewUrl: '',
        realResX: 2,
        realResY: 2,       
      })
    },
    onShowDetail (item) {
      ebus.emit('show-superhdscreen-detail', item)
    },
    onRefresh () {
      this.doLoadSuperHdScreens()
    },
    onDel (item) {
      msgbox.alert({
        title: this.$t('alert.areYouSure'),
        text: this.$t('alert.notBeRecovered'),
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: "#DD6B55",
        cancelButtonText: this.$t('common.cancel'),
        confirmButtonText: this.$t('common.confirm'),
        closeOnConfirm: false        
      }, 
      function() {
        streamSrcApi.delItem('superhdscreens', item._id).then(function(res) {
          if (res && res.data && res.data.code === 0) {
            this.doLoadSuperHdScreens()
          } else {
            toast.code(this, res.data)
          }
          msgbox.close()
        }.bind(this))
      }.bind(this))
    }
  }
}
</script>

<style>
</style>